<template>
  <div class="home">
    <HelloWorld3/>
    <div class="banner"> <img src="../assets/banner3.jpg" alt=""></div>
    <!-- neirong -->
    <div class="main">
      <div class="top"><p>联系我们</p><p>CONTANT</p></div>
      <div class="main_two">
        <div class="main_left">
          <p><input type="text" placeholder="姓名"><input type="text" placeholder="邮箱"><input type="text" placeholder="电话"></p>
          <textarea cols="30" rows="10" placeholder="内容" class="txt1"></textarea>
        </div>
        <div class="main_right main_two">
          <textarea rows="10" placeholder="内容1" class="txt2"></textarea>
          <div class="txt3">
            <p>网站建设传播文化有限公司</p>
            <p>地点:山东省济南市市中区经四路万达广场1</p>
            <p>邮编：103753</p>
            <p>电话：198964783545</p>
            <p>传真：1655122-454</p>
            <p>手机：4552121545</p>
            <p>邮箱：web@1549845.qq.com</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end -->
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld3 from '@/components/HelloWorld3.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2
  },
   
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.banner{width: 100%;img{width: 100%;}}
.main{width: 80%;margin: 10px 10% 50px 10%;}
.top{margin: 50px 0;font-size: 20px;line-height: 40px;}
.main_two{display: flex;flex-direction: row;justify-content: space-between;}
.main_left{width: 50%;input{color: gainsboro;font-size: 20px;width: 25%;display: block;border: 0;border-bottom:1px solid gainsboro;padding: 10px;}p{display: flex;flex-direction: row;justify-content: space-between;margin: 20px 0;}
textarea{width:calc(100% - 20px);color: gainsboro;font-size: 20px;padding: 10px;}}
.main_right{width: 40%;line-height: 50px;font-size: 20px;}
.txt1{display: block;}
.txt2{display: none;}
@media screen and (max-width:1200px){
.top{text-align: center;}
.main_two{flex-wrap: wrap;}
.main_left{width: 100%;input{width: 40%;margin-bottom: 60px;}p{flex-wrap: wrap;}}
.main_left input:last-child{margin-bottom: 20px;}
.main_right{width: 100%;line-height:40px;}

.txt1{display: none;}
.txt2{display: block;width: 43%;}
.txt3{width: 50%;}
}
</style>